{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig,gridKeyword %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    '@gritter_css'
    '@jquery_ui_css'
    '@multiselect_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
    <div id="dialog-message" class="hide"></div>
    <div class="widget-box">
        <div class="widget-header">
            <h4 class="widget-title">{{ 'Fill in the basic information agents'|trans }}</h4>
            <div class="widget-toolbar">
                <a href="#" data-action="collapse">
                    <i class="ace-icon fa fa-chevron-up"></i>
                </a>
            </div>
        </div>

        <div class="widget-body">
            <div class="widget-main padding-4">
                <form class="form-horizontal" id="theForm" method="post" action="{{ path('icsoc_agent_batch_insert', {'file':file}) }}">
                    <div class="form-group">
                        <label for="agent_info_form_user_role" class="col-sm-3 control-label no-padding-right required" >{{ 'User role'|trans }}</label>
                        <div class="col-md-4">
                            <select id="user_role" name="user_role" required="required" class="col-xs-10 col-sm-10" aria-required="true">
                                    <option value="" selected="selected">{{ 'Default'|trans }}</option>
                                {% for key,role in roles %}
                                    <option value="{{ key }}" >{{ role }}</option>
                                {% endfor %}
                            </select>
                            <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                                  data-content="{{ 'The user does not set the corresponding permissions, user login after no menu display'|trans }}" title="" data-original-title="">?</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right required" aria-required="true">{{ 'Their skill set'|trans }}</label>
                        <div class="col-md-4">
                            <select id="agent_info_form_belong_queues" name="user_queues[]" class="col-xs-10 col-sm-4 multiple-select" multiple="multiple">
                            {% for key,que in queues %}
                                 <option value="{{ key }}">{{ que }}</option>
                            {% endfor %}
                            </select>
                            <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                                  data-content="{{ 'Check the skill group that is for the user to manage and view the skill set of data'|trans }}" title="" data-original-title="">?</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label no-padding-right required" aria-required="true">{{ 'The front seat type'|trans }}</label>
                        <div class="col-md-4">
                            {% for key,type in agent_role %}
                            <label class="radio-inline" id="agent_info_form_ag_role">
                                <input type="radio" id="ag_role{{ key }}" name="ag_role" required="required" value="{{ key }}" aria-required="true" {% if loop.first %}checked="checked" {% endif %} >    {{ type }}
                            </label>
                            {% endfor %}
                            <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="bottom"
                                  data-content="{{ 'If adding the common management of users (such as business executives) is set to a non agents, non seat cannot login front CRM'|trans }}" title="" data-original-title="">?</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-9 col-md-offset-3">
                            <input type="hidden" id="account_info" value="" />
                            <input type="hidden" id="account_limit" name="account_limit" value="" />
                            <input type="hidden" id="valid_account" name="valid_account" value="" />
                            <button class="btn btn-info" type="button" id="sub" >
                                <i class="ace-icon fa fa-check bigger-110"></i>
                                {{ 'Save'|trans }}
                            </button>
                            &nbsp; &nbsp; &nbsp;
                            <button class="btn" type="button" id="cancel">
                                <i class="ace-icon fa fa-undo bigger-110"></i>
                                {{ 'return'|trans }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    '@jquery_ui_js'
    '@multiselect_js'
    '@IcsocUIBundle/Resources/public/plugin/quicksearch/jquery.quicksearch.js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        $('[data-rel=popover]').popover({container:'body'});
        jQuery(function($) {
            $("#account_info").val('');
            $("#valid_account").val('');
            var str = $("#account_info").val();
            var valid_account = $("#valid_account").val();
            var count = 0;
            $("#account_limit").val('');
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                url: "{{ path('icsoc_agent_export_data', {'file':file}) }}",  //数据；
                mtype: 'POST',
                datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
                height: '100%', //展示高度；
                colNames:['{{ 'Agent number' | trans }}', '{{ 'Username'|trans }}','{{ 'Nickname'|trans }}','{{ 'Password'|trans }}'],
                colModel:[
                    {name:'ag_num',index:'ag_num', width:60, sortable:false, key:true, editable:true,frozen:true},
                    {name:'ag_name',index:'ag_name', width:60, sortable:false,frozen:true},
                    {name: 'ag_nickname',index:'ag_nickname', width:60, sortable:false,frozen:true},
                    {name:'password',index:'ag_pass',width:90, sortable:false}
                ],
                {{ gridConfig(true) }}
                multiselect: false,
                rownumbers: true,
                rowNum: -1,
                caption: "{{ 'Seating list'|trans }}", //表格名称
                loadComplete: function(xhr) {
                    var objs = xhr.rows;
                    $("#grid-table").jqGrid("setCaption",xhr.message);
                    var str = '';
                    for (var i=0; i<objs.length; i++) {
                        var v = objs[i];
                        str = str+v.ag_num+','+ v.ag_name+','+ v.password+"#";
                        valid_account = valid_account+v.ag_num+','+ v.ag_name+','+ v.password+','+v.ag_nickname+"#";
                        count++;
                    }
                    updatePagerIcons(this);
                    $("#account_info").val(str);
                    $("#valid_account").val(valid_account);
                }
            });
            {{ gridNav(false,false,false,false,true,false) }}

            //提交批量生成坐席
            $('#sub').click(function(){
                var account = $("#account_info").val();
                var valid_account = $("#valid_account").val();
                if(valid_account=='')
                {
                    gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Not to add table'|trans }}','info');
                    return false;
                }
                var user_role = $("#user_role").val();
                if(!user_role)
                {
                    gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Please select a character'|trans }}','info');
                    return false;
                }
                else
                {
                    if($("input[name='ag_role']:checked").val()==-1)
                    {
                        $('#theForm').submit();
                    }
                    else
                    {
                        $.ajax({
                            url:'{{ path('icsoc_agent_check_agent_num') }}',
                            data:{'account':account},
                            type :'POST',
                            dataType:'json',
                            success:function(response){
                                if(response.num==0)
                                {
                                    gritterAlert("{{ 'Prompt'|trans }}","{{ 'The current seat number has reached the maximum value, can not continue to add seats, please contact the operator to add'|trans }}","info");
                                    return false;
                                } else {
                                    $("#account_limit").val(response.num);
                                    if (count > response.num) {
                                        $('#dialog-message').text(response.message);
                                        var dialog = $( "#dialog-message" ).removeClass('hide').dialog({
                                            modal: true,
                                            title: "{{ 'Prompt'|trans }}",
                                            title_html: true,
                                            buttons: [
                                                {
                                                    text: "Cancel",
                                                    class : "btn btn-xs",
                                                    click: function() {
                                                        $( this ).dialog( "close" );
                                                    }
                                                },
                                                {
                                                    text: "OK",
                                                    class : "btn btn-primary btn-xs",
                                                    click: function() {
                                                        $('#theForm').submit();
                                                        $( this ).dialog( "close" );
                                                    }
                                                }
                                            ]
                                        });
                                    } else {
                                        $('#theForm').submit();
                                    }
                                }
                            }
                        });
                    }
                }
            });
            //取消批量生成坐席
            $('#cancel').click(function(){
                location.href='{{ path('icsoc_agent_index') }}';
            });
        });
        $(document).ready(function (){
            $('.multiple-select').multiSelect({
                selectableHeader:"<div class='custom-header'>{{ 'Selectable'|trans }}</div><input type='text' class='col-xs-12 col-sm-12' autocomplete='off' placeholder='搜索'>",
                selectionHeader:"<div class='custom-header'>{{ 'Selected'|trans }}</div><input type='text' class='col-xs-12 col-sm-12' autocomplete='off' placeholder='搜索'>",
                cssClass:"col-xs-10 col-sm-5",
                afterInit: function(ms){
                    var that = this,
                            $selectableSearch = that.$selectableUl.prev(),
                            $selectionSearch = that.$selectionUl.prev(),
                            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
                    console.log(selectableSearchString);
                    console.log(selectionSearchString);
                    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                            .on('keydown', function(e){
                                if (e.which === 40){ //40为向下的箭头;
                                    that.$selectableUl.focus();
                                    return false;
                                }
                            });

                    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                            .on('keydown', function(e){
                                if (e.which == 40){
                                    that.$selectionUl.focus();
                                    return false;
                                }
                            });
                },
                afterSelect: function(){
                    this.qs1.cache();
                    this.qs2.cache();
                },
                afterDeselect: function(){
                    this.qs1.cache();
                    this.qs2.cache();
                }
            });
       });
    </script>
    <style>
        .custom-header{
            text-align: center;
            padding: 3px;
            background: #E5E5E5;
        }
    </style>
{% endblock %}